<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!--返回错误信息-->
<?php echo validation_errors(); ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <?php
    $title = [
        'title' => '角色管理',
    ];
    $this->load->view('/admin/common/header', $title);
    ?>
</head>

<body data-type="widgets">
<script src="/assets/js/theme.js"></script>
<div class="am-g tpl-g">

<!--    头部   侧边菜单-->
    <?php $this->load->view('/admin/common/bodyLeft'); ?>
    <script type="text/javascript">
    	$(".js-sidebar-nav>li:nth-child(9)>ul").show(80);
    	$(".js-sidebar-nav>li:nth-child(9)>a>span").addClass("sidebar-nav-sub-ico-rotate");
    	$(".js-sidebar-nav>li:nth-child(9)>ul>li:nth-child(2)>a").addClass("active");
    </script>
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <ol class="am-breadcrumb am-breadcrumb-slash">
                                <li><a href="/admin/user/index?page=1">用户管理</a></li>
                                <li class="am-active">角色列表</li>
                            </ol>

                        </div>
                        <div class="widget-body  am-fr">
                            <form action="/admin/role/remove" id="form_admin" method="post">

                            <div class="am-u-sm-6 am-u-md-4 am-u-lg-2">
                                <div class="am-form-group">
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
                                            <a class="am-btn am-btn-primary" data-am-modal="{target: '#addRole', closeViaDimmer: 0, width: 400, height: 225}"><span class="am-icon-plus"></span> 新增角色</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                                <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                    <input type="text" class="am-form-field" name="search" id="search" placeholder="请输入角色名称">
                                    <span class="am-input-group-btn">
                                        <a href="javascript:void(0)" onclick="search123()" class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search">搜索</a>
          							</span>
                                </div>
                            </div>

                            <div class="am-u-sm-12">
                                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black "
                                       id="example-r">
                                    <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>角色名称</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <?php
                                    if(isset($list) && !empty($list)) {
                                        foreach ($list as $v) {
                                            echo '<tr class="gradeX">
                                            
                                             <td>' . $v['id'] . '</td>
                                             <td class="name">' . $v['name'] . '</td>
                                            <td>
                                                <div class="tpl-table-black-operation">
                                                 <a href="javascript:;" data-id="' . $v['id'] . '" class="editBtn" data-am-modal="{target: \'#editModal\', closeViaDimmer: 0, width: 400, height: 225}">
                                                        <i class="am-icon-pencil"></i> 修改
                                                    </a>
                                                 <a href="#" class="tpl-table-black-operation-del" data-id="' . $v['id'] . '">
                                                    <i class="am-icon-trash"></i> 删除
                                                </a>
                                                <a href="/admin/role/setview?id=' . $v['id'] . '" >
                                                    <i class="am-icon-exclamation"></i> 权限配置
                                                </a>
                                                
                                            </div>
                                    </tr>';
                                        }
                                    }else{
                                        echo '';
                                    }
                                    ?>
                                    </tbody>
                                </table>
                            </div>
                            <div class="am-u-lg-12">
                                <div class="am-u-sm-centered">
                                    <ul class="am-pagination am-pagination-centered" id="paging">

                                    </ul>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- 新增模态框 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="addRole">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">新增角色
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">
        <form class="am-form am-form-horizontal" style="position: relative;top: 25px;">
            <div class="am-form-group">
                <label for="name" class="am-u-sm-4 am-form-label">角色名称：</label>
                <div class="am-u-sm-8">
                    <input type="text" id="name" placeholder="输入角色名称">
                </div>
            </div>
        </form>
        <div style="position: relative;top: 50px;">
            <button type="button" class="am-btn am-btn-primary am-u-sm-6" id="saveRole" data-am-modal-close>保存</button>
            <button type="button" class="am-btn am-btn-danger am-u-sm-6" data-am-modal-close>取消</button>
        </div>
    </div>
  </div>
</div>
<!-- 编辑模态框 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="editModal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">编辑角色
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">
        <form class="am-form am-form-horizontal" style="position: relative;top: 25px;">
            <div class="am-form-group">
                <label for="editname" class="am-u-sm-4 am-form-label">角色名称：</label>
                <div class="am-u-sm-8">
                    <input type="text" id="editname" placeholder="输入角色名称">
                </div>
            </div>
        </form>
        <div style="position: relative;top: 50px;">
            <button type="button" class="am-btn am-btn-primary am-u-sm-6" id="editRole" data-am-modal-close>保存</button>
            <button type="button" class="am-btn am-btn-danger am-u-sm-6" data-am-modal-close>取消</button>
        </div>
    </div>
  </div>
</div>

<!-- 模拟confirm -->
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-bd">
      确定要删除记录吗？
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>
<script>
    function search123() {
        var v = document.getElementById('search').value;
        console.log(v);

//        console.log(document.getElementById('searchData').value);
        window.location.href='?page=1'+'&search='+v

    }
</script>

<script>
    //todo 第一次选中可以,第二次不行
    /* 全选 */
    $('.checkall').click(function(){
        $(".checkitem").prop("checked",this.checked);
    });

    //单个删除
    $(".tpl-table-black-operation-del").on("click",function(){
        var thisId = $(this).data("id");
        $('#my-confirm').modal({
            onConfirm: function(options) {
                window.location.href = "/admin/role/remove?id=" + thisId;
            },
            onCancel: function() {
            }
        });
    });

    // 新增角色
    $("#saveRole").click(function(){
        var name = $("#name").val();
        if(name.replace(/(^\s*)|(\s*$)/g, "")==""){
            alert("请输入角色名。");
            return false;
        }else{
            $.ajax({
                url:"/admin/role/add",
                data:{
                    name:name
                },
                type:"post",
                async:false,
                success:function(data){
                    window.location.reload();
                },
                error:function(data){
                    alert(data);
                }
            
            });
        }
    });
    // 编辑角色
    $(".editBtn").click(function(){
        var id = $(this).data("id");
        var gradeX = $(this).parents(".gradeX");
        $("#editRole").unbind("click").click(function(){
            var editName = $("#editname").val();
            if(editName.replace(/(^\s*)|(\s*$)/g, "")==""){
                alert("请输入角色名。");
                return false;
            }else{
                $.ajax({
                    url:"/admin/role/edit",
                    data:{
                        id:id,
                        name:editName
                    },
                    type:"post",
                    async:false,
                    success:function(data){
                        gradeX.find(".name").text(editName);
                        $("#editname").val("");
                    },
                    error:function(data){
                        alert(data);
                    }
                });
            }
        });
    });
    



</script>

<script src="/assets/js/amazeui.min.js"></script>
<script src="/assets/js/amazeui.datatables.min.js"></script>
<script src="/assets/js/dataTables.responsive.min.js"></script>
<script src="/assets/js/app.js"></script>
<script src="/assets/js/page.js"></script>
<script>
    $(document).ready(function() {  
        //设置分页信息  
        var pageOptions = {  
            AllowPaging: true,  
            PageIndex: <?php echo $_GET['page'] ?>,      //设置当前页码  
            PageSize: <?php echo $pageNum ?>,       //设置分页大小  
            RecordCount: <?php echo $totalNum ?>,  //设置数据总数  
            // TotalPage: ,      //设置总页数
            showPageCount: 4,  
            onPageClick: function(pageIndex) {  
                var search = '<?php echo isset($_GET['search'])  ? $_GET['search'] : 0 ?>';
                var page = parseInt(pageIndex);
                if(search){
                    window.location.href = "?page="+ page + "&search=" + search; 
                }else {
                    window.location.href = "?page="+ page;
                }
                
            }  
        }  
        //初始化分页栏
        $('#paging').pageBar(pageOptions);      
    })  
</script>
</body>

</html>